<template>
    <view class="pub_page pub_login pub_header_padding">
        <pub-head headerName="login" :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll page_box">
            <div class="logo_txt">
                <div class="p_1">欢迎来到</div>
                <div class="p_2">Chatterbox</div>
            </div>
            <div class="input_div">
                <div class="li li_1">
                    <input class="input" v-model="mobile" type="number" placeholder="请输入手机号" maxlength="11">
                </div>
                <div class="li li_2" v-if="mainType == 1">
                    <input class="input" v-model="password" type="password" placeholder="请输入登录密码">
                </div>
                <div class="li li_2" v-if="mainType == 2">
                    <input class="input" v-model="code" type="number" placeholder="请输入验证码" maxlength="6">
                    <div class="input_right_btn" @click="toSendCode">{{ code_msg }}</div>
                </div>
            </div>
            <div class="other_div">
                <div class="p" @click="mainTypeClick">{{ mainType == 1 ? '用短信验证码登录' : '用密码登录' }}</div>
                <div class="p" @click="$comFun.openWin('/pages/login/find_psd', { openType: 1 })">忘记密码？</div>
            </div>
            <div class="pub_btn" @click="toLogin">立即登录</div>
            <div class="pub_btn_normal" @click="$comFun.openWin('/pages/login/register')">前往注册</div>
            <div class="ys_txt" @click="isChoose == 0 ? isChoose = 1 : isChoose = 0">
                <span class="icon-font-basic" :class="isChoose == 1 ? 'icon-b-select-6' : 'icon-b-select-4'"></span>
                登录即代表同意
                <span class="txt"
                    @click.stop="$comFun.openWin('/pages/other/document', { id: '1747230807989112832' })">《用户协议》</span>和<span
                    class="txt"
                    @click.stop="$comFun.openWin('/pages/other/document', { id: '1747230807989112833  ' })">《隐私政策》</span>
            </div>
            <br>
            <br>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pagescrollTop: 0,
            headerConfig: {
                title: '登录',//标题栏内容
                left_type: 0,
            },

            mainType: 1,//1密码登录  2验证码登录
            password: '',
            passwordFocus: false,
            mobile: '',
            mobileFocus: false,
            code: '',
            codeFocus: false,
            code_msg: '请输入手机号',

            isChoose: false
        };
    },
    onLoad() {
        if (this.$comFun.getUserToken()) {
            uni.switchTab({
                url: '/pages/chat/index'
            });
        }
    },
    onPageScroll(res) {
        this.pagescrollTop = res.scrollTop;
    },
    watch: {
        mobile() {
            if (this.code_msg.indexOf('剩') == -1) {
                if (this.mobile.length == 11 && this.$comFun.ValidateMobile(this.mobile)) {
                    this.code_msg = '发送验证码';
                } else {
                    this.code_msg = '请输入手机号';
                }
            }
        }
    },
    methods: {
        mainTypeClick() {
            this.mainType = this.mainType == 1 ? 2 : 1;
            this.password = '';
            this.code = ''
        },
        async toLogin() {
            if (!this.$comFun.ValidateMobile(this.mobile)) {
                this.$comFun.toast('请输入正确的手机号');
                return;
            }
            if ((this.mainType == 1 && !this.password) || (this.mainType == 2 && !this.code)) {
                this.$comFun.toast('请输入' + (this.mainType == 1 ? '密码' : '验证码'));
                return;
            }
            if (!this.isChoose) {
                this.$comFun.toast('请同意《用户协议》和《隐私政策》');
                return;
            }
            this.$comFun.openLoading();
            const res = await this.$request.post(this.mainType == 1 ? 'login/mobileLogin' : 'login/smsLogin', {
                mobile: this.mobile,
                code: this.code,
                password: this.password,
            });
            console.log(res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.$comFun.toast('登录成功');
                this.$comFun.setUserToken(res.result.token);
                this.$comFun.setUserInfo({
                    avatar: res.result.avatar,
                    nickName: res.result.nickName,
                    sex: res.result.sex,
                    userId: res.result.userId,
                })
                setTimeout(() => {
                    uni.switchTab({
                        url: '/pages/chat/index'
                    });
                }, 1000);
            } else {
                this.$comFun.toast(res.message);
            }
        },
        async toSendCode() {
            if (this.mobile.length != 11) {
                // this.$comFun.toast('请输入正确的手机号');
                return;
            }
            if (this.code_msg == '发送验证码') {
                this.$comFun.openLoading();
                const res = await this.$request.post('public/sendSms', {
                    mobile: this.mobile
                });
                // console.log(res);
                this.$comFun.closeLoading();
                if (res.code == 200) {
                    this.codeTime();
                } else {
                    this.$comFun.toast(res.message);
                }
            }
        },
        codeTime() {
            this.code_msg = '剩 60 s';
            let count = 60;
            let time = setInterval(() => {
                if (count == 1) {
                    clearInterval(time);
                    if (this.$comFun.ValidateMobile(this.mobile)) {
                        this.code_msg = '发送验证码';
                    } else {
                        this.code_msg = '请输入手机号';
                    }
                    return;
                }
                count--;
                this.code_msg = '剩 ' + count + ' s';
            }, 1000);
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/login.scss";
</style>
